<template>
  <div>
    <searchBox @handleSearch="handleSearch" @handleReset="handleReset">
      <el-form :inline="true" :model="searchFrom.param" label-width="auto">
        <el-form-item label="优惠券类型">
          <el-select v-model="searchFrom.param.couponType" placeholder="请选择" style="width: 200px" clearable>
            <el-option v-for="(item, index) in sys_coupons_type" :key="index" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="优惠券状态">
          <el-select v-model="searchFrom.param.status" placeholder="请选择" style="width: 200px" clearable>
            <el-option v-for="(item, index) in sys_vouchers_status" :key="index" :label="item.label"
              :value="item.value" />
          </el-select>
        </el-form-item>
      </el-form>
    </searchBox>
      <el-button type="primary" @click="addManufacture" class="mb8">新增</el-button>
    <el-table :data="tableData" style="height: calc(100vh - 300px)" v-loading="loading">
      <el-table-column prop="id" label="ID"  width="100" />
      <el-table-column prop="newName" label="优惠券名称" />
      <el-table-column prop="newType" label="优惠券类型" align="center" width="100" />
      <el-table-column prop="useCondition" label="使用条件" width="300" />
      <el-table-column prop="site" label="发放站点" align="center" width="300">
        <template #default="scope">
          <el-space spacer=" ">
            <el-text>{{ scope.row.websites[0]?.name }}</el-text>
          </el-space>
        </template>
      </el-table-column>

      <el-table-column  label="优惠码" align="center" >
      <template #default="scope">
        <el-space spacer=" ">
          <el-text style="width: 50px;">{{ scope.row.code }}</el-text>
          <el-icon color="#409eff" v-copyText="scope.row.code"
          v-copyText:callback="copyTextSuccess"><CopyDocument /></el-icon>
        </el-space>
    </template>
      </el-table-column>


      <el-table-column label="有效期" align="center" width="500">
        <template #default="scope">
          <el-space spacer="至" v-if="!scope.row.longTerm">
            <el-text> {{ scope.row.newStartDate }}</el-text>
            <el-text> {{ scope.row.newEndDate }}</el-text>
          </el-space>
          <el-text v-else>长期有效</el-text>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" align="center" />
      <el-table-column label="操作" align="center" width="200" fixed="right">
        <template #default="scope">
          <el-button link type="primary" @click="choseEdit(scope.row)">编辑</el-button>
          <el-button link type="primary" @click="goUsageDetails(scope.row)">使用详情</el-button>
          <!-- <el-button type="danger" @click="deleteList(scope.row)">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <Pagination :total="total" :limit="searchFrom.pageSize" :page="searchFrom.pageNum"
      @pagination="handleCurrentChange">
    </Pagination>
    <CouponAdd :isManufacture="isManufacture" :choseTag="choseTag" :manufactureItem="publicItem"
      :dialogManufacture="dialogManufacture" @handleManufactureClose="handleManufactureClose"
      @handleManufactureSure="handleManufactureSure"></CouponAdd>
  </div>
</template>
<script setup name="Product">
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import CouponAdd from "./components/couponAdd.vue";
const router = useRouter();
const { proxy } = getCurrentInstance();
const { sys_vouchers_status, sys_coupons_type } = proxy.useDict("sys_vouchers_status", 'sys_coupons_type');

const dialogManufacture = ref(false); //默认不显示弹出框
const isManufacture = ref(true); //默认是true：新增，false是编辑
const choseTag = ref("full"); //默认是满减卷
const publicItem = ref({});

const loading = ref(true)
const searchFrom = ref({
  pageNum: 1,
  pageSize: 10,
  param: {},
});

const tableData = ref([]);
const total = ref(0);
onMounted(() => {
  getList();
});
const getList = () => {
  site.SiteCoupon.list({
    data: searchFrom.value,
  }).then((res) => {
    loading.value = false
    total.value = res.total;
    if (res.data?.length) {
      res.data = res.data.map((code) => {
        return {
          ...code,
          websiteIds: code.websites?.map((e) => e.id),
          newStartDate: proxy.DateTime(code.startDate),
          newEndDate: proxy.DateTime(code.endDate),
          newType: sys_coupons_type.value.find((e) => e.value === code.couponType)?.label ,
          newName: code.descriptions?.find((e) => e.languageId === 1)?.name,
        };
      });
    }
    tableData.value = res.data;
  });
};
// 搜索
const handleSearch = () => {
  getList();
};
// 重置
const handleReset = () => {
  searchFrom.value.param = {};
  getList();
};

// 新增
const addManufacture = () => {
  dialogManufacture.value = true;
  isManufacture.value = true;
  publicItem.value = {};
  choseTag.value = "full";
};
// 编辑
const choseEdit = (row) => {
  if (row.couponType === "fullReduction") {
    choseTag.value = "full";
  } else if (row.couponType === 'discount') {
    choseTag.value = "price";
  }else {
    choseTag.value = "mail";
  }
  publicItem.value = row;
  dialogManufacture.value = true;
  isManufacture.value = false;
};



// 弹出框的取消事件
const handleManufactureClose = () => {
  dialogManufacture.value = false;
  choseTag.value = "full";
};
// 弹出框的确定事件
const handleManufactureSure = () => {
  dialogManufacture.value = false;
  getList();
};
// 使用详情
const goUsageDetails = (rowItem) => {
  router.push({ path: "/coupon/coupon/couponDetails", query: rowItem });
};
// 分页
const handleCurrentChange = (newPage) => {
  searchFrom.value.pageNum = newPage.page;
  searchFrom.value.pageSize = newPage.limit;
  getList();
};
const deleteList = (rowItem) => {
  site.SiteCoupon.deleteBatch({
    data: {
      ids: [rowItem.id]
    }
  }).then((res) => {
    getList();
  });
}
const copyTextSuccess = () => {/** 复制代码成功 */
    proxy.$modal.msgSuccess("复制成功");
}
</script>
